<template>
  <div class="comment-list">
    <transition-group name="list" tag="div">
      <template v-for="(comment, idx) in visibleComments" :key="comment.id">
        <div class="comment-item">
          <img class="avatar" :src="comment.commenter.avatar" />
          <div class="main">
            <div class="meta">
              <span class="nickname">{{ comment.commenter.nickname }}</span>
              <span class="time">{{ formatTimeAgo(comment.createdAt) }}</span>
            </div>
            <div class="content">
              <template v-if="comment.replyToComment">
                <span class="reply-to">
                  @{{ comment.replyToComment.user_id === comment.user_id ? '自己' :
                  comment?.replyToComment?.commenter?.nickname }}：
                </span>
              </template>
              {{ comment.content }}
            </div>
            <div class="actions">
              <span class="reply-btn" @click="toggleReply(comment.id)">
                回复
              </span>
            </div>
            <Comment v-if="replyingId === comment.id" 
              @submit="submitReply(comment, $event)" />
            <!-- 递归渲染子评论 -->
            <CommentList v-if="comment.children && comment.children.length" :comments="comment.children"
              class="children" />
          </div>
        </div>
      </template>
    </transition-group>
    <div v-if="comments.length > showCount" class="show-more" @click="showMore">
      查看更多评论
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { formatTimeAgo } from '@/utils'
import Comment from './comment.vue'
import { commentTalk } from '@/service/module/talk'
const props = defineProps({
  comments: {
    type: Array,
    default: () => []
  }
})

const showCount = ref(10)
const visibleComments = computed(() => props.comments.slice(0, showCount.value))

function showMore() {
  showCount.value += 10
}

// 回复功能
const replyingId = ref(null)
function toggleReply(id) {
  replyingId.value = id === replyingId.value ? null : id
}
function cancelReply() {
  replyingId.value = null
}
async function submitReply(comment, {content}) {
  await commentTalk({ 
    content,
    reply_id: comment.id,
    moment_id: comment.moment_id
  })
  // 这里 emit 或调用接口提交回复，示例 emit
  // emit('reply', { content: replyContent.value, parentId: comment.id })
  cancelReply()
}
</script>

<style scoped>
.comment-list {
  margin-top: 10px;
}

.comment-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  animation: fadeIn 0.5s;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #f5f5f5;
}

.main {
  flex: 1;
}

.meta {
  font-size: 13px;
  color: #888;
  margin-bottom: 2px;
}

.nickname {
  color: #6366f1;
  font-weight: bold;
  margin-right: 8px;
}

.time {
  font-size: 12px;
}

.content {
  font-size: 15px;
  color: #222;
}

.reply-to {
  color: #60a5fa;
  margin-right: 2px;
}

.actions {
  margin: 6px 0 0 0;
}

.reply-btn {
  color: #6366f1;
  cursor: pointer;
  font-size: 13px;
  margin-right: 8px;
  transition: color 0.2s;
}

.reply-btn:hover {
  color: #60a5fa;
}


/* .children {
  margin-left: 40px;
  border-left: 2px solid #f0f0f0;
  padding-left: 12px;
} */

.show-more {
  text-align: center;
  color: #6366f1;
  cursor: pointer;
  margin: 10px 0;
  font-size: 14px;
  user-select: none;
  transition: color 0.2s;
}

.show-more:hover {
  color: #60a5fa;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>